<extend name="en_us:Public:base" />
<block name="title">
    <title>Room card</title>
</block>
<block name="extendHead">
    <link rel="stylesheet" type="text/css" href="/Public/dist/Home/RoomPage/index.css?rev=fadf41d9a78810e4e6eb1c0a9d3f5313">
    <link rel="stylesheet" type="text/css" href="/Public/jslib/toastr/2.1.2/toastr.min.css?rev=e36d7ff8c89b5bb6e9db66a169d59c47">
</block>
<block name="document">
    <div id="doc" class="container">
        <!--<div id="doc-header" class="navbar navbar-fixed-top">
            <a href="javascript:void(0);" data-href="/Home/RoomPage/list" class="pull-left navbar-icon"><span class="iconfont icon-chevronleft"></span></a>
            <div class="navbar-title typo-text-white-deep">Room card</div>
        </div>-->
        <div id="doc-body">
            <div class="horizontal-padding">
                <div class="vertical-padding text-center">
                    <div id="qrcode-img-container">
                        <div id="qrcode-img"></div>
                        <img id="qrcode-img-logo" src="/Public/dist/Home/image/qrcloud-logo.png">
                        <img id="loading-img" class="hidden" src="/Public/dist/Home/image/lock-loading.gif">
                        <img id="broken-img" class="hidden" src="/Public/dist/Home/image/broken.png">
                        <img id="noQrcard-img" class="hidden" src="/Public/dist/Home/image/qrcloud-logo.png">
                    </div>
                </div>
                <div class="text-center typo-subhead room-style" id="qrcode-room">
                    <div class="info"></div>
                    <a data-href="/Home/RoomPage/share.html" class="shareSubmit hidden"></a>
                </div>                
                <!--<div class="text-info">
                    <span class="qrcode-icon icon-danger"></span>
                    <span class="padding-horizon">Click on the qrcode or shake the new room card</span>
                </div>-->
                <div class="row help-open text-right">
                    <div class="ulite-js-ripple-effect look-for-help hidden" data-toggle="modal" data-target="#help-modal" style="margin-right: 16px;">Can not unlock? Get help</div>
                    <a href="" class="ulite-js-ripple-effect contact-the-shopkeeper hidden" style="margin-right: 16px;color: red;">If you have questions? Contact the master</a>
                </div>
                <div class="background-F5"></div>
                <div id="shareContainer"></div>
            </div>
        </div>
        <include file="en_us:Public:Include_login" />
    </div>
    <a href="javascript:void(0);" id="textLabels" class="hidden"></a>
    <include file="en_us:Public:Include_loading" is-hidden="hidden" />
    <div class="modal" id="help-modal">
        <div class="vertical-middle-block container">
            <div class="modal-dialog modal-sm vertical-middle-block-cell">
                <div class="modal-content">
                    <div class="modal-header">
                        Tips
                    </div>
                    <div class="modal-body">
                        <p>1、Please adjust the phone<span class="text-accent">Screen brightness</span></p>
                        <p>2、Please pay attention to the distance between the phone and the door lock</p>
                        <p>3、Please attach the qrcode<span class="text-accent"> to</span>The access control scanner</p>
                        <p>4、Click on the qrcode or shake a shake to refresh the room card to try again</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <audio id="img-success" preload style='display:none;' controls>
        <source src="/Public/uclbrt/raw/shake_match.ogg" type="audio/ogg">
        <source src="/Public/uclbrt/raw/shake_match.mp3" type="audio/mpeg">
    </audio>
    <script type="text/html" id="templateShareList">
        <div class="share-list-parent">
            <div class="background-F10"></div>
            <div class="move-content">
                <div class="shareItem">  
                    <div class="share-top">
                        <div class="share-name"></div>
                        <a href="javascript:void(0);" class="share-mobile"></a>
                    </div>
                    <div class="share-bottom hidden"><div class="share-identity"></div></div>
                    <div class="share-delete"><span>Delete</span></div>               
                </div> 
            </div>           	
        </div>
    </script>
</block>
<block name="extendFootJs">
    <script type="text/javascript" src="/Public/jslib/toastr/2.1.2/toastr.min.js?rev=1778e466055d4a265993e979c174c338"></script>
    <script type="text/javascript" src="/Public/jslib/qrcode/jquery.qrcode.min.js?rev=c31ae1b9ebebb5ed4742e6b0f6aaa648"></script>
    <script type="text/javascript" src="/Public/dist/Home/RoomPage/index.js?rev=daedf9b07ed75471e8202c40d490fba5"></script>
</block>
